<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link rel="stylesheet" href="css/material.css">
		<script src="js/material.js"></script>
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<!-- Wide card with share menu button -->
		<style>
			.login-card-wide.mdl-card {
				width: 300px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}

			.login-card-wide>.mdl-card__title {
				color: #fff;
				height: 176px;
				background: url(img/welcome_card.jpg) center / cover;
			}

			.login-card-wide>.mdl-card__menu {
				color: #fff;
			}
		</style>
	</head>
	<body>
		<form action="#">
			<div class="login-card-wide mdl-card mdl-shadow--2dp">
				<div class="mdl-card__title">
					<h2 class="mdl-card__title-text">欢迎</h2>
				</div>
				<div class="mdl-card__supporting-text">

					<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
						<input class="mdl-textfield__input" type="text" id="account">
						<label class="mdl-textfield__label" for="sample3">账号...</label>
					</div>
					<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
						<input class="mdl-textfield__input" type="password" id="password">
						<label class="mdl-textfield__label" for="sample3">密码...</label>
					</div>

				</div>
				<div class="mdl-card__actions mdl-card--border">
					<a id="show-dialog" type="button" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
						登录
					</a>
				</div>
				<!-- 右上角的分享按钮 -->
				<!-- <div class="mdl-card__menu">
				<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
					<i class="material-icons">share</i>
				</button>
			</div> -->
			</div>
		</form>

		<dialog class="mdl-dialog">
			<div class="mdl-dialog__content">
				<p>
					账号或密码错误
				</p>
			</div>
			<div class="mdl-dialog__actions mdl-dialog__actions--full-width">
				<!-- <button type="button" class="mdl-button">Agree</button> -->
				<button type="button" class="mdl-button close">确定</button>
			</div>
		</dialog>
	</body>
	<script>
		var dialog = document.querySelector('dialog');
		var showDialogButton = document.querySelector('#show-dialog');
		if (!dialog.showModal) {
			dialogPolyfill.registerDialog(dialog);
		}
		showDialogButton.addEventListener('click', function() {
			dialog.showModal();
		});
		dialog.querySelector('.close').addEventListener('click', function() {
			dialog.close();
		});
	</script>
</html>
